<template>
	<view class="content">
		<view class="head">
			<u-navbar leftIcon="arrow-leftward" rightText="日期篩選" :placeholder='true'
				@leftClick="leftClick('/pages/mine/index')" title="月結單下載" @rightClick="rightClick">
			</u-navbar>
		</view>
		<view class="main">
			<view class="goods-detail" v-for="(item,index) in order" :key="index">
				<view class="detail-left">
					<view class="goods-left">
						<u-checkbox-group @change="selected(item)">
							<label style="display: flex;align-items: center;">
								<!-- 		<u-checkbox activeColor="#645AED" shape="circle" class="selected" color="#555555"
									:checked="item.check" /> -->
								<text class="time">{{item.month}}</text>
							</label>
						</u-checkbox-group>
					</view>
				</view>
				<view class="downbtn">
					<view class="btn" @click="pdfitem(item.month)">
						下载PDF
					</view>
					<view class="btn" @click="Excelitem(item.month)">
						下载Excel
					</view>
				</view>
			</view>
		</view>
		<!-- 临时隐藏 -->
		<!-- 	<view class="end">
			<view class="end-left">
				<u-checkbox-group @change="selectgoods()">
					<label style="display: flex;align-items: center;">
						<u-checkbox activeColor="#645AED" shape="circle" :checked="allchecked" />全選
					</label>
				</u-checkbox-group>

			</view>
			<view class="end-right">
				<view class="btn" @click="downpdf">
					下载PDF
				</view>
				<view class="btn" @click="downexc">
					下载Excdel
				</view>
			</view>
		</view> -->
		<lingfeng-timepicker :rangeBtnActiveStyle="{color:'#645AED',borderColor:'#645AED'}" toolBarTitle="選擇時間"
			ref="timePop" type="year-month-range" :defaultData="defaultData" :minDate="minDate" :maxDate="maxDate"
			@change="timeChange"></lingfeng-timepicker>
	</view>


</template>

<script>
	import {
		baseURL
	} from '@/network/base.js';
	import {
		getmonthbill,

	} from '@/network/api/setting.js'
	export default {
		data() {
			const today = new Date();
			return {

				minDate: {
					year: 2020,
					month: 5,
					date: 1
				},
				maxDate: {
					year: 2050,
					month: 5,
					date: 5
				},
				defaultData: {},
				dateRangeDefault: {
					startTime: '2022-5',
					// endTime: `${today.getFullYear()}-${today.getMonth() + 1}`,
          endTime: '',
				},
				allchecked: false,
				order: [],
				page: 1
			}
		},
		onShow() {
      this.page=1
      this.order=[]
			this.getmonthbilllist()
		},
		methods: {
			filterCheckedItems(dataList) {
				// 使用filter方法过滤出check=true的对象
				return dataList.filter(item => item.check == true);
			},
			//单个下载
			pdfitem(month) {
				const pdfUrl = `${baseURL}/tcpdf/month?lang=cn&month=${month}`
				// #ifdef H5
				window.open(
					pdfUrl
				)
				// #endif
				// 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
				// #ifdef MP-WEIXIN
				uni.downloadFile({
					url: pdfUrl,
					success: res => {
						console.log(res)
						if (res.statusCode === 200) {
							// 预览pdf文件
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: true, // 右上角菜单，可以进行分享保存pdf
								success: function(file) {
									console.log("file-success", file)
								}
							})
						}
					}
				})
				// #endif
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '正在下载……'
				});
				uni.downloadFile({
					url: pdfUrl,
					success: res => {
						console.log(res)
						if (res.statusCode === 200) {
							// 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
							uni.hideLoading()
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function(res) {
									uni.showToast({
										icon: 'success',
										mask: true,
										// title: '文件已保存：' + res.savedFilePath, //保存路径
										title: '下载成功',
										duration: 2000,
									});
									setTimeout(() => {
										var filePath = res.savedFilePath;
										uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
											filePath: filePath,
											showMenu: true,
											success: function(res) {
												console.log('打开文档成功');
											}
										});
									}, 1000)
								}
							})
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件下载失败',
						});
					},
				})
				// #endif
			},
			Excelitem(month) {
				const ExcelUrl = `${baseURL}/month/excel?lang=cn&month=${month}`
				// #ifdef H5
				window.open(
					ExcelUrl
				)
				// #endif
				// 微信下载文件需要在微信公众平台>开发>开发管理>服务器域名>downloadFile合法域名>配置白名单域名
				// #ifdef MP-WEIXIN
				uni.downloadFile({
					url: ExcelUrl,
					success: res => {
						console.log(res)
						if (res.statusCode === 200) {
							// 预览pdf文件
							uni.openDocument({
								filePath: res.tempFilePath,
								showMenu: true, // 右上角菜单，可以进行分享保存pdf
								success: function(file) {
									console.log("file-success", file)
								}
							})
						}
					}
				})
				// #endif
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '正在下载……'
				});
				uni.downloadFile({
					url: ExcelUrl,
					success: res => {
						console.log(res)
						if (res.statusCode === 200) {
							// 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
							uni.hideLoading()
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function(res) {
									uni.showToast({
										icon: 'success',
										mask: true,
										// title: '文件已保存：' + res.savedFilePath, //保存路径
										title: '下载成功',
										duration: 2000,
									});
									setTimeout(() => {
										var filePath = res.savedFilePath;
										uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
											filePath: filePath,
											showMenu: true,
											success: function(res) {
												console.log('打开文档成功');
											}
										});
									}, 1000)
								}
							})
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '文件下载失败',
						});
					},
				})
				// #endif

			},
			//多个下载
			downpdf() {
				console.log(this.filterCheckedItems(this.order));
				let filterList = this.filterCheckedItems(this.order)
				if (this.filterCheckedItems(this.order).length < 1) {
					return uni.showToast({
						title: '请选择项目',
						icon: 'none'
					})
				}
				for (let i = 0; i < filterList.length; i++) {
					let pdfUrl = `${baseURL}/tcpdf/month?lang=cn&month=${filterList[i].month}`
					uni.downloadFile({
						url: pdfUrl,
						success: res => {
							console.log(res)
							if (res.statusCode === 200) {
								// 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
								uni.hideLoading()
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: function(res) {
										uni.showToast({
											icon: 'success',
											mask: true,
											// title: '文件已保存：' + res.savedFilePath, //保存路径
											title: '下载成功',
											duration: 2000,
										});
										setTimeout(() => {
											var filePath = res.savedFilePath;
											uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
												filePath: filePath,
												showMenu: true,
												success: function(res) {
													console.log('打开文档成功');
												}
											});
										}, 1000)
									}
								})
							}
						},
						fail: (err) => {
							console.log(err);
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '文件下载失败',
							});
						},
					})
				}
			},
			downexc() {
				let filterList = this.filterCheckedItems(this.order)
				if (this.filterCheckedItems(this.order).length < 1) {
					return uni.showToast({
						title: '请选择项目',
						icon: 'none'
					})
				}
				for (let i = 0; i < filterList.length; i++) {
					let ExcelUrl = `${baseURL}/month/excel?lang=cn&month=${filterList[i].month}`
					console.log(ExcelUrl);

				}
			},

			async getmonthbilllist() {
				let data = {
					release: this.dateRangeDefault.startTime,
					relend: this.dateRangeDefault.endTime,
					sortAttr: '',
					sortMode: '',
					page: this.page
				}
        //加载中
        uni.showLoading({
          title: '加载中'
        })
				const res = await getmonthbill(data)
        uni.hideLoading()
				this.order = res.data.order
				this.order.forEach(item => {
					item.check = false
				})
			},
			rightClick() {
				this.defaultData = this.dateRangeDefault;
				this.$refs.timePop.show();

			},
			timeChange(val) {
				this.dateRangeDefault.startTime = val[0];
				this.dateRangeDefault.endTime = val[1];
				console.log(123);
				this.getmonthbilllist()
			},
			checkAllTrue(order) {
				for (let i = 0; i < order.length; i++) {
					if (!order[i].check) {
						return false; // 如果有任何一个check为false，立即返回false
					}
				}
				return true; // 遍历完全部元素都为true，则返回true
			},
			selected(item) {
				item.check = !item.check
				this.allchecked = this.checkAllTrue(this.order)
			},
			selectgoods() {
				this.allchecked = !this.allchecked
				if (this.allchecked) {
					this.order.map(item => {
						item.check = true
					})
				} else {
					this.order.map(item => {
						item.check = false
					})
				}
			},
			leftClick(url) {
				uni.switchTab({
					url: url
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f6f9;
	}

	.content {

		.end {
			width: 100vw;
			height: 110rpx;
			background-color: #fff;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;

				.end-flex {
					display: flex;
					align-items: center;
				}
			}

			&-right {
				margin-right: 32rpx;
				display: flex;

				.btn {
					margin-left: 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 0rpx;
					color: #FFFFFF;
					width: 170rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #645AED;
					border-radius: 30rpx;
				}



			}
		}

		.main {
			.goods {
				line-height: 80rpx;
				background-color: #FFFFFF;

				&-detail {
					padding: 32rpx;
					// margin: 0 32rpx;
					background-color: #fff;
					border-bottom: 1rpx solid #F1F1F1;

					.downbtn {
						margin-top: 40rpx;
						display: flex;
						justify-content: flex-end;

						.btn {
							margin-left: 20rpx;
							width: 170rpx;
							height: 60rpx;
							border: 1px solid #645AED;
							border-radius: 20rpx;
							text-align: center;
							line-height: 60rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #645AED;
						}
					}

					.detail-left {
						display: flex;

						.goods-left {
							display: flex;
							align-items: center;

							.time {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}

						}
					}

				}
			}
		}
	}
</style>
